// ---------------  创建剪裁区 ------------------
// - 找到剪裁区的图片 （img#image）
let image = $('#image');
// - 设置配置项
let  option = {
    // 纵横比(宽高比)
    aspectRatio: 1, // 正方形
    // 指定预览区域
    preview: '.img-preview' // 指定预览区的类名（选择器）
};
// - 调用cropper方法，创建剪裁区
image.cropper(option);

$('#d1').on('click',function(){
 $('#d2').trigger('click')
})

$('#d2').on('change',function(){
  if(this.files.length>0){
    let fileObj = this.files[0]
    let url = URL.createObjectURL(fileObj)
   image.cropper('replace',url)
  }
})
$('button:contains("确定")').on('click',function(){
  var canvas = image.cropper('getCroppedCanvas', {width: 30, height: 30});
  // 2. 把canvas转成base64格式字符串
  var base64 = canvas.toDataURL();
  $.ajax({
    type: 'POST',
    url: '/my/user/avatar',
    data: { avatar: base64 }, // { id: 1 }
    success: function (res) {

      if (res.status === 0) {
        layer.msg(res.message);
        // 更新index.html的头像
        window.parent.getUserInfo();
      }
    }
  })
})